<template>
    <view v-if="!model.autoDisplay || itemDiplay" class="wy-form-text wy-flex-1" :class="[scrollClass,model.theme.box.class]" :style="model.theme.box.style">
        <template v-if="model.showBox">
            <view class="wy-form-group wy-flex-row wy-position-relative">
                <view class="wy-form-group-min-height"></view>
                <view :class="[model.theme.group.class,model.multiline?'wy-flex-column':'wy-flex-row wy-align-center']" :style="model.theme.group.style" class="wy-flex-1 wy-form-group-content">
                    <view class="wy-form-group-title wy-flex-row  wy-align-center" v-if="model.title" :class="[model.theme.titleBox.class,titleMinWidth,model.multiline?'':'wy-justify-end']" :style="model.theme.titleBox.style">
                        <text class="wy-size-base wy-color-text" :class="[model.theme.title.class]" :style="model.theme.title.style">{{locale(model.title)}}</text> 
                        <text class="wy-size-base wy-color-text" :class="[model.theme.sp.class]" v-if="model.sp">{{model.sp}}</text>
                    </view>
					<view v-if="model.multiline && model.remark" class="wy-flex-column">
						<text class="wy-size-s wy-color-second" v-for="(remark,index) in remarkArr" :key="index">{{remark}}</text>
					</view>
                    <view class="wy-flex-1 wy-flex-row wy-align-center wy-ps-tb-ss">
                        <view
                            v-if="model.showContent"
                            @click="click" 
                            class="wy-form-group-input wy-flex-row wy-align-center wy-flex-1"
                            :class="[model.theme.input.class,validateClass,model.disabled?'wy-form-group-disabled':'']"
                            :style="model.theme.input.style" 
                        > 
                        <slot></slot> 
                        </view> 
                        <view @click="unitClick" v-if="showUnit||model.theme.unit.class||model.theme.unit.style" :class="[model.theme.unit.class]" :style="model.theme.unit.style" class="unit wy-ms-left-s">
                        	<slot name="unit"></slot>
                            <text class="wy-color-text wy-size-base">{{locale(model.unit)}}</text>
                        </view>
                        <view class="wy-ms-left-ss" v-if="model.tip">
                            <wy-icon @iconClicked="showTip" name="warn" type="error"></wy-icon> 
                        </view>
						<view class="wy-ms-left-ss" v-if="!model.multiline && model.remark">
						    <wy-icon @iconClicked="showRemark" name="question" type="error"></wy-icon>
						</view>
                    </view> 
                </view> 
            </view>
        </template>
        <template v-else> 
            <slot></slot> 
        </template> 
    </view>
</template>

<script>
    import {wyProps} from '../../libs/props.js';
    import {wyItem,wySlot} from '../../libs/form.js'; 
    export default { 
         name:'wy-form-slot', 
         mixins: [wyProps,wyItem,wySlot],
         data(){
             return {
                model:{
                    theme:{
                        box:{class:'',style:''},
                        group:{class:'',style:''}, 
                        titleBox:{class:'',style:''},
                        title:{class:'',style:''},
                        input:{class:'',style:''},
                        sp:{class:'',style:''},
                        unit:{class:'',style:''}
                    },
					autoDisplay:false,//是否跟随display
                    showContent:true,//是否展示框架区
                    showBox:true ,//是否显示内容区
                    slot:'' //插槽名称
                }
             }
         }, 
         computed:{ 
         }, 
         methods:{ 
            mounted__(){
                //console.log(this.model)
            }  
         }
        
    }
</script>

<style>

</style>
